<template>
	<div class="typography-demo">
		<div class="demo-header">
			<h1 class="typography-display-2">字体系统</h1>
			<p class="typography-body text-secondary">
				参考 Apple 官网设计的现代化字体系统
			</p>
		</div>

		<!-- 展示标题 -->
		<section class="demo-section">
			<h2 class="section-title">标题样式</h2>
			<div class="demo-card">
				<div class="type-example">
					<div class="typography-display-1">Display 1 - 超大标题</div>
					<span class="type-info">80px / Bold / -0.022em</span>
				</div>
				<div class="type-example">
					<div class="typography-display-2">Display 2 - 大标题</div>
					<span class="type-info">56px / Semibold / -0.022em</span>
				</div>
				<div class="type-example">
					<div class="typography-display-3">Display 3 - 中标题</div>
					<span class="type-info">40px / Semibold / -0.022em</span>
				</div>
				<div class="type-example">
					<h1>H1 - 一级标题</h1>
					<span class="type-info">28px / Semibold / -0.022em</span>
				</div>
				<div class="type-example">
					<h2>H2 - 二级标题</h2>
					<span class="type-info">21px / Semibold / 0</span>
				</div>
				<div class="type-example">
					<h3>H3 - 三级标题</h3>
					<span class="type-info">17px / Semibold / 0</span>
				</div>
			</div>
		</section>

		<!-- 正文样式 -->
		<section class="demo-section">
			<h2 class="section-title">正文样式</h2>
			<div class="demo-card">
				<div class="type-example">
					<div class="typography-body-lg">
						正文大号 - 这是一段示例文字，展示大号正文的效果。Apple 的设计理念注重简洁与优雅。
					</div>
					<span class="type-info">21px / Normal / 0</span>
				</div>
				<div class="type-example">
					<div class="typography-body">
						正文标准 - 这是一段示例文字，展示标准正文的效果。清晰的层级结构让内容更易阅读。
					</div>
					<span class="type-info">17px / Normal / 0</span>
				</div>
				<div class="type-example">
					<div class="typography-body-sm">
						正文小号 - 这是一段示例文字，展示小号正文的效果。适合辅助说明和次要信息。
					</div>
					<span class="type-info">14px / Normal / 0</span>
				</div>
				<div class="type-example">
					<div class="typography-caption">
						辅助文字 - 用于标注、说明等场景
					</div>
					<span class="type-info">12px / Normal / 0</span>
				</div>
			</div>
		</section>

		<!-- 字重展示 -->
		<section class="demo-section">
			<h2 class="section-title">字重系统</h2>
			<div class="demo-card">
				<div class="type-example">
					<div class="typography-body font-light">Light (300) - 轻盈的字重</div>
				</div>
				<div class="type-example">
					<div class="typography-body font-normal">Normal (400) - 标准字重</div>
				</div>
				<div class="type-example">
					<div class="typography-body font-medium">Medium (500) - 中等字重</div>
				</div>
				<div class="type-example">
					<div class="typography-body font-semibold">Semibold (600) - 半粗体</div>
				</div>
				<div class="type-example">
					<div class="typography-body font-bold">Bold (700) - 粗体</div>
				</div>
			</div>
		</section>

		<!-- 颜色系统 -->
		<section class="demo-section">
			<h2 class="section-title">文字颜色</h2>
			<div class="demo-card">
				<div class="type-example">
					<div class="typography-body text-primary">Primary - 主要文字</div>
				</div>
				<div class="type-example">
					<div class="typography-body text-secondary">Secondary - 次要文字</div>
				</div>
				<div class="type-example">
					<div class="typography-body text-tertiary">Tertiary - 辅助文字</div>
				</div>
				<div class="type-example">
					<div class="typography-body text-link">Link - 链接文字</div>
				</div>
			</div>
		</section>

		<!-- 实际应用示例 -->
		<section class="demo-section">
			<h2 class="section-title">实际应用</h2>
			<div class="demo-card apple-style-card">
				<h1 class="typography-display-3">
					创新科技
					<br />
					触手可及
				</h1>
				<p class="typography-body-lg text-secondary">
					探索我们最新的产品和服务，体验前所未有的创新技术。
					每一个细节都经过精心打磨，只为给你带来最佳体验。
				</p>
				<div class="cta-buttons">
					<ElButton
						type="primary"
						size="large"
					>
						了解更多
					</ElButton>
					<ElButton
						size="large"
						plain
					>
						立即购买
					</ElButton>
				</div>
			</div>
		</section>

		<!-- 代码示例 -->
		<section class="demo-section">
			<h2 class="section-title">使用方法</h2>
			<div class="demo-card">
				<h3>CSS 类名</h3>
				<pre><code>&lt;div class="typography-display-1"&gt;超大标题&lt;/div&gt;
&lt;div class="typography-h1"&gt;一级标题&lt;/div&gt;
&lt;div class="typography-body"&gt;正文内容&lt;/div&gt;
&lt;div class="typography-caption"&gt;辅助文字&lt;/div&gt;</code></pre>

				<h3 style="margin-top: 2rem;">
					HTML 标签
				</h3>
				<pre><code>&lt;h1&gt;自动应用 H1 样式&lt;/h1&gt;
&lt;h2&gt;自动应用 H2 样式&lt;/h2&gt;
&lt;p&gt;自动应用正文样式&lt;/p&gt;</code></pre>
			</div>
		</section>
	</div>
</template>

<script setup lang="ts">
// 无需额外逻辑
</script>

<style scoped lang="scss">
.typography-demo {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

.demo-header {
	text-align: center;
	margin-bottom: 60px;

	h1 {
		margin-bottom: 16px;
	}
}

.demo-section {
	margin-bottom: 60px;
}

.section-title {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 24px;
	color: #1d1d1f;
}

.demo-card {
	background: white;
	border-radius: 18px;
	padding: 40px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.type-example {
	padding: 24px 0;
	border-bottom: 1px solid #f5f5f7;

	&:last-child {
		border-bottom: none;
	}

	.type-info {
		display: block;
		margin-top: 8px;
		font-size: 12px;
		color: #86868b;
		font-family: 'SF Mono', monospace;
	}
}

.apple-style-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	text-align: center;
	padding: 60px 40px;

	h1 {
		color: white;
		margin-bottom: 24px;
	}

	p {
		max-width: 600px;
		margin: 0 auto 32px;
		color: rgba(255, 255, 255, 0.9);
	}
}

.cta-buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

pre {
	background: #f5f5f7;
	padding: 20px;
	border-radius: 12px;
	overflow-x: auto;
	margin: 16px 0;

	code {
		font-family: 'SF Mono', 'Monaco', monospace;
		font-size: 14px;
		line-height: 1.6;
		color: #1d1d1f;
	}
}

h3 {
	font-size: 21px;
	font-weight: 600;
	color: #1d1d1f;
	margin-bottom: 16px;
}

// 响应式
@media (max-width: 768px) {
	.demo-card {
		padding: 24px;
	}

	.apple-style-card {
		padding: 40px 24px;
	}

	.cta-buttons {
		flex-direction: column;

		.el-button {
			width: 100%;
		}
	}
}
</style>
